<template>
  <el-dialog
    :show-close="false"
    :append-to-body="true"
    :before-close="dialogClose"
    :visible.sync="visible"
    class="auto-common-dialog-size add-bill-dialog">
    <SectionTitle title="添加账单" style="margin-bottom: 16px;" />
    <el-form
      ref="addBillForm"
      :model="formData"
      :rules="rules"
      class="add-form"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="客户名称" prop="customerId">
        <selectWithoutHttp
          v-model="formData.customerId"
          :remote-method="getClientNameMethods"
          :list-data="clientNameOption"
          :delay="200"
          :placement="'right'"
          label-name="value"
          extend-class="order-client-select"
          key-name="id"
          filterable
          remote
          placeholder="请选择客户"
          clearable />
      </el-form-item>
      <el-form-item label="账单月份" prop="billMonth">
        <el-date-picker
          v-model="formData.billMonth"
          type="month"
          size="small"
          format="yyyy/MM"
          placeholder="请选择账单月份" />
      </el-form-item>
    </el-form>
    <div class="mt10 center">
      <el-button v-loading="loading" type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button class="btn ml20 cancel-btn-style" plain size="small" @click="dialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '@/components/Title';
import { getClientName } from '@/api/select';
import { addCustomerBill } from '@/api/customer';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';

export default {
  components: {
    SectionTitle,
    selectWithoutHttp
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        customerId: null,
        billMonth: ''
      },
      clientNameOption: [],
      rules: {
        'customerId': [{ required: true, message: '请选择客户', trigger: 'change' }],
        'billMonth': [{ required: true, message: '请选择账单月份', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.getClientNameMethods(null, true);
  },
  methods: {
    dialogClose() {
      this.$emit('closeDialog');
      this.loading = false;
      this.$refs['addBillForm'].resetFields();
    },
    handleSubmit: _.debounce(function() {
      this.$refs['addBillForm'].validate().then(() => {
        const params = _.cloneDeep(this.formData);
        params.billMonth = Date.parse(params.billMonth) / 1000;
        this.loading = true;
        addCustomerBill(params).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.$emit('afterAddBill');
            this.dialogClose();
          }
        }).catch(err => {
          this.dialogClose();
          console.error(err.message);
        });
      });
    }, 500),
    // 获取客户列表
    getClientNameMethods(name = '', notShowNoAuthTip = false) {
      const param = {
        clientName: name,
        isGetMengliClient: false
      };
      getClientName(param, 1, notShowNoAuthTip).then(res => {
        this.clientNameOption = res.data;
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.add-bill-dialog {
  &::v-deep {
    .el-date-editor--month {
      width: 240px;
    }
    .filterableSelect {
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .center{
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
  .add-form {
    margin: 16px 0 24px;
  }
}
</style>

